<template>
  <div class="app-container">
    <el-form size="small" :inline="true" label-width="68px" ref="queryForm" :model="queryParams">
      <el-form-item label="名称" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入昵称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"> 查询</el-button>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" size="small" @click="handleAdd"> 新增</el-button>
      </el-col>
    </el-row>
    <el-table style="margin-top: 10px" v-loading="loading" :data="dataList">
      <el-table-column label="Id" align="center" prop="id" />
      <el-table-column label="编码" align="center" prop="code" />
      <el-table-column label="名称" align="center" prop="name" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"> 修改 </el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"> 删除 </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.current"
      :limit.sync="queryParams.size"
      @pagination="handleQuery"
    />
    <role-modal ref="modal" @ok="handleQuery"></role-modal>
  </div>
</template>

<script>
import { queryRoleList, delRole } from '@/api/mange/role'
import RoleModal from '@/views/manage/role/RoleModal.vue'

export default {
  name: 'Role',
  components: { RoleModal },
  data() {
    return {
      loading: false,
      dataList: [],
      formKey: '',
      queryParams: {
        current: 1,
        size: 20
      },
      // 总条数
      total: 0
    }
  },
  created() {
    this.formKey = this.$route.query.key || this.$route.params.key
    this.type = this.$route.query.type || this.$route.params.type
    this.handleQuery()
  },
  methods: {
    handleQuery() {
      this.loading = true
      queryRoleList(this.formKey, this.queryParams).then((res) => {
        console.log(res)
        this.dataList = res.data.records
        this.total = res.data.total
        this.loading = false
      })
    },
    handleSelectionChange() {},
    handleAdd() {
      this.$refs.modal.form.formKey = this.formKey
      this.$refs.modal.add()
    },
    handleUpdate(row) {
      this.$refs.modal.form = row
      this.$refs.modal.form.formKey = this.formKey
      this.$refs.modal.update()
    },
    handleDelete(row) {
      this.$confirm('是否确认删除？')
        .then(() => {
          this.loading = true
          delRole(row.id).then((res) => {
            console.log(res)
          })
        })
        .then(() => {
          this.loading = false
          this.handleQuery()
          this.msgSuccess('删除成功')
          this.handleQuery()
        })
        .catch(() => {})
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  overflow-y: auto;
}
</style>
